<template>
  <div class="login-container">
    <div class="title">Eye-tracing Data Management System</div>
    <div class="title">眼动检测分析系统</div>
    <div class="login">
      <div class="title1">登录</div>
      <div class="login-form">
        <el-form>
          <el-form-item name="userName">
            <el-input placeholder="请输入用户名" v-model="formState.username" :prefix-icon="User" />
          </el-form-item>
          <el-form-item name="password">
            <el-input
              placeholder="请输入密码"
              v-model="formState.password"
              :prefix-icon="Lock"
              class="secure-password-input"
              autoComplete="new-password" />
          </el-form-item>
        </el-form>
      </div>
      <el-button type="primary" @click="userLogin">登录</el-button>
    </div>
    <div class="version">Version 1.0.0</div>
  </div>
</template>
<script setup lang="ts">
    import {  reactive } from 'vue';
    import { User, Lock } from '@element-plus/icons-vue'
    import { useRouter } from 'vue-router'
    import { login } from '@/api/user'
    import { ElMessage } from 'element-plus'
    import { useStore } from 'vuex'
    import {ILoginResponse} from '@/types/api'
    // import { ILoginParams } from '@/types/user';
    const store = useStore()
    const router = useRouter();
    const formState = reactive({
        username: '',
        password: ''
    });
    const userLogin = async () => {
        if (formState.username == '') {
            ElMessage({
                message: '请输入用户名',
                type: 'warning'
            })
            return
        } else if (formState.password == '') {
            ElMessage({
                message: '请输入密码',
                type: 'warning'
            })
            return
        } else {
            // formState.username = formState.username.trim()
            const res: ILoginResponse = await login(formState) 
            if (res.data.code === 100001) { //用户不存在
                ElMessage({
                    message: res.data.message,
                    type: 'error'
                })
                return
            } else if (res.data.code === 4010) { //账号密码错误
                ElMessage({
                    message: res.data.message,
                    type: 'error'
                })
                return
            } else {
                window.sessionStorage.setItem('token', res.data.result.token)
                store.commit('updateUserName', res.data.result.userName)
                store.commit('updateMenuIndex', 0)
                store.commit('updateRoleId', res.data.result.role.roleId)
                router.push("/")
            }
        }
    }
    
</script>
<style lang="scss" scoped>
    .login-container {
        display: flex;
        flex-direction: column;
        height: 100vh;
        justify-content: center;
        align-items: center;
        background-image: url('../../assets/img/background.png');

        .title {
            font-weight: 400;
            margin-left: 20px;
            margin-bottom: 30px;
            font-size: 32px;
        }
        .title1 {
            font-weight: 400;
            margin-left: 40%;
            margin-bottom: 30px;
            font-size: 32px;
        }

        .login {
            box-sizing: border-box;
            width: 400px;
            height: 400px;
            background-color: white;
            padding: 20px;

            .el-input.el-input--prefix {
                width: 80%;
                height: 50px;
                margin-left: 40px;
            }

            .el-button {
                margin-top: 40px;
                width: 80%;
                margin-left: 40px;
                height: 50px;
            }
        }

        .version {
            font-weight: 400;
            margin-left: 20px;
            margin-top: 30px;
            font-size: 24px;
        }
        .secure-password-input {
          -webkit-text-security: disc;
        }
    }
</style>